<template>
	<div class="container">
		<h3 style="margin-bottom:20px;">
			产品召回
		</h3>
		<el-form label-width="140px">
			<el-row>
				<el-col :span="10">
					<el-form-item label="产品名称：">
						{{ruleForm.companyName}}
					</el-form-item>
					<el-form-item label="批号：">
						{{ruleForm.batchNo}}
					</el-form-item>
					<el-form-item label="企业：">
						{{ruleForm.companyName}}
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="召回范围：" >
					    {{ruleForm.traceStep}}
					</el-form-item>
					<el-form-item label="召回时间：">
						{{ruleForm.companyName}}
					</el-form-item>
					<el-form-item label="召回图片：">
							<img  :src="showImg+ruleForm.prodImg" class="avatar">
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label-width="140px">
						召回原因及公告(该信息将显示在追溯扫码中)
					</el-form-item>
					<el-form-item label-width="140px">
					    <div ref="editor" style="width:80%;" :disabled="disabled" ></div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="back">返回</el-button>

			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from "axios"
	import E from 'wangeditor';
	export default{
		data(){
			return{
				ruleForm:{},
				name:'',
				showImg:'http://grove.cpzsyun.com:81/api/plant/file/show/',
				chains:[],
				disabled:true
			}
		},
		mounted(){
			var editor = new E(this.$refs.editor)
			editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
			editor.customConfig.uploadFileName = 'file';
			editor.customConfig.uploadImgHooks = {
			    customInsert: function (insertImg, result, editor) {

			        var url =  "http://" + window.location.host + "/file/show/" +  result.data
			        insertImg(url)

			    }
			}

			editor.customConfig.onchange = (html) => {
			    this.ruleForm.reason = html
			}
			editor.create();
			editor.txt.html(this.ruleForm.reason)
			editor.$textElem.attr('contenteditable', false)
			this.id = this.$route.query.id
			this.init()
		},
		methods:{


			init(){
				// axios.get("http://192.168.0.100:8880/plant/recall/load/"+this.id).then((res)=>{
				axios.get("http://grove.cpzsyun.com:81/api/plant/recall/load/"+this.id).then((res)=>{
					this.ruleForm = res.data.recall
					this.ruleForm.recallDate = this.ruleForm.recallDate.substring(0,10)
					// this.img = this.$store.state.imageUrls + this.ruleForm.img
					var editor = new E(this.$refs.editor)
					editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
					editor.customConfig.uploadFileName = 'files';
					editor.customConfig.uploadImgHooks = {
					    customInsert: function (insertImg, result, editor) {
					        // console.log(this.$store.state.imageUrls)
					        var url =  "http://" + window.location.host + "/file/show/" +  result.data
					        insertImg(url)

					    }
					}
					editor.customConfig.onchange = (html) => {
					    this.ruleForm.reason = html
					}
					editor.create();
					editor.txt.html(this.ruleForm.reason)
					editor.$textElem.attr('contenteditable', false)
				})
			},
			// 召回
			back(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
.avatar{
	width: 147px;
	height: 147px;
}
</style>
